<template>
	<div class="content">
		<div class="pageSearchView">
			<el-form :inline="true" :model="searchParam" class="demo-form-inline" label-width="auto" style="width: 100%">
				<el-row>
					<!--					<el-col :span="6">-->
					<!--						<el-form-item label="车间/产线">-->
					<!--							<el-tree-select v-model="searchParam.groupIds" :data="workRoomList" check-strictly-->
					<!--															:props="{ children: 'sonList', label: 'orgName', value: 'id' }" style="width: 250px"-->
					<!--															@change="organizationIdChange" />-->
					<!--						</el-form-item>-->
					<!--					</el-col>-->
					<!--					<el-col :span="6">-->
					<!--						<el-form-item label="设备" prop="equipmentList">-->
					<!--							<el-select v-model="searchParam.deviceIds" placeholder="请选择设备" filterable style="width: 240px">-->
					<!--								<el-option v-for="item in equipmentData" :key="item.id" :label="item.equipmentName" :value="item.id">-->
					<!--									<span style="float: left">{{ item.equipmentName }}</span>-->
					<!--									<span style="float: right; color: var(&#45;&#45;el-text-color-secondary); font-size: 13px;">-->
					<!--										{{ item.equipmentCode }}-->
					<!--									</span>-->
					<!--								</el-option>-->
					<!--							</el-select>-->
					<!--						</el-form-item>-->
					<!--					</el-col>-->
					<el-col :span="6">
						<el-form-item label="类型">
							<el-radio-group v-model="searchParam.type">
								<el-radio value="6">当班</el-radio>
								<el-radio value="4">当日</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="日期">
							<el-date-picker v-model="searchParam.date" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"
															style="width: 200px" />
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item>
							<el-button type="primary" :icon="Search" @click="getList()">查询</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="deviceName">
			{{ route.query.deviceNo }}
		</div>

		<div class="info-view">
			<div class="title-view">
				设备状态分布
				<div class="icon_box">
					<template v-for="item in icoList">
                    <span class="circle" :style="{ backgroundColor: item.color,
                    borderColor:item.color
                    }" />
						<span class="ico_text">{{ item.label }}</span>
					</template>
				</div>
			</div>

			<div class="chartBox" style="height: 60px">
				<template v-if="statsArr && statsArr.length">
					<qiePianChart :chart-data="statsArr" />
				</template>
			</div>
		</div>

		<div class="info-view">
			<div class="title-view">
				设备开动率
			</div>

			<div class="chartBox">
				<template v-if="statsArr">
						<div ref="chartContainer" style="width: 100%;height: 100%"></div>
					</template>
			</div>
		</div>


		<div class="info-view">
			<div class="title-view">
				设备爬坡
			</div>

			<div class="chartBox">
				<template v-if="staticArrPa">
					<div ref="chartContainerPa" style="width: 100%;height: 100%"></div>
				</template>
			</div>
		</div>


		<div class="info-view">
			<div class="title-view">
				设备生产
			</div>

			<div class="chartBox">
				<template v-if="statsArrSh">
					<div ref="chartContainerSh" style="width: 100%;height: 100%"></div>
				</template>
			</div>
		</div>


	</div>
</template>
<script setup>
import moment from 'moment';
import axiosInstance from '@/utils/http/api';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import qiePianChart from './echarts/qiePianChart.vue';
import linebarChart from './echarts/linebarChart.vue';
import * as echarts from 'echarts';

onMounted(() => {
	getList();
	getOptions();
});

const paginationParams = ref({ pageSize: 18, pageNum: 1 });
const pageTotal = ref(0);
const equipmentData = ref([]);
const searchParam = ref({ type: '4', date: moment().format('YYYY-MM-DD') });
const infoList = ref([]);
const workRoomList = ref([]);

const chartContainer = ref(null);
const chartContainerPa = ref(null);
const chartContainerSh = ref(null);

const initChart = () => {
	const chartInstance = echarts.init(chartContainer.value);

	const option = {
		tooltip: {
			trigger: 'axis'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: Object.keys(staticArr.value)
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '设备开动率',
				type: 'line',
				smooth: true,
				data: Object.values(staticArr.value).map(value => parseFloat(value))
			}
		]
	};

	chartInstance.setOption(option);
};

const initChartPa = () => {
	const chartInstance = echarts.init(chartContainerPa.value);

	const option = {
		tooltip: {
			trigger: 'axis'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: Object.keys(staticArrPa.value)
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '设备爬坡',
				type: 'line',
				smooth: true,
				data: Object.values(staticArrPa.value).map(value => parseFloat(value))
			}
		]
	};

	chartInstance.setOption(option);
};

const initChartSh = () => {
	const chartInstance = echarts.init(chartContainerSh.value);

	const option = {
		tooltip: {
			trigger: 'axis'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: Object.keys(statsArrSh.value)
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '设备生产', 
				type: 'bar',
				smooth: true,
				data: Object.values(statsArrSh.value).map(value => parseFloat(value))
			}
		]
	};

	chartInstance.setOption(option);
};

const icoList = ref([
	{ label: '运行', color: '#75d874' },
	{ label: '待机', color: '#e0bc78' },
	{ label: '报警', color: '#bd6d6c' },
	{ label: '停机', color: 'gray' },
	{ label: '调试', color: 'gray' }
]);

const statusColor = {
	1: 'rgb(30,190,102)',
	2: 'rgb(255,185,0)',
	5: 'rgb(253,22,60)',
	4: 'rgb(119,119,119)'
};

const statusText = {
	1: '运行',
	2: '待机',
	5: '告警',
	4: '关机'
};

const timeLabels = [
	{ key: 'runTime', label: '运行', class: 'running' },
	{ key: 'standbyTime', label: '待机', class: 'standby' },
	{ key: 'waringTime', label: '告警', class: 'alarm' },
	{ key: 'shutdownTime', label: '关机', class: 'close' }
];


const statsArr = ref([]);
const staticArr = ref({});
const staticArrPa = ref({});
const statsArrSh = ref({});

const getList = () => {
	const param = {
		...searchParam.value,
		...{
			deviceId: route.query.deviceId
		}
	};

	// 设备状态分布
	axiosInstance.get('/api/navigation/chart/state', { params: param })
		.then(res => {
			statsArr.value = res.data;
		});


	// 设备开动率
	axiosInstance.get('/api/navigation/dmsDevice/startRateStatistic', { params: { ...param, ...{ time: param.date } } })
		.then(res => {
			staticArr.value = res.data;
			initChart();
		});

	// 设备爬坡
	axiosInstance.get('/api/navigation/chart/yieldAndBeat', { params: param })
		.then(res => {
			staticArrPa.value = res.data.yieldHistory;
			staticArrSh.value = res.data.beatHistory;

			initChartPa()
			initChartSh()
		});
};


import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();


const getOptions = () => {
	axiosInstance.post('/api/basedataOrganization/getAll', {})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			workRoomList.value = res.data;
		});
};

const handleSizeChange = (e) => {
	paginationParams.value.pageSize = e;
	paginationParams.value.pageNum = 1;
	getList();
};

const handleCurrentChange = (e) => {
	paginationParams.value.pageNum = e;
	getList();
};

const organizationIdChange = (e) => {
	axiosInstance.post('/api/basedataEquipment/getPage', { organizationId: e, current: 1, pageSize: 9999 })
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			equipmentData.value = res.data.records;
		});
};
</script>
<style scoped lang="less">
.deviceName {
	padding: 15px;
	font-size: 20px;
	font-weight: 700;
}

.info-view {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 15px;

	.title-view {
		display: flex;
		justify-content: space-between;
	}
}

.icon_box {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.circle {
		display: inline-block;
		margin: 0 10px;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		border: 1px solid;
	}
}

.chartBox {
	height: 200px; /* 根据需要调整高度 */
	width: 100%;
}
</style>
